<!--
 * @Author: @zhangrui-1997 17805271997@163.com
 * @Date: 2023-08-10 16:02:30
 * @LastEditors: giteezr 2250368646@qq.com
 * @LastEditTime: 2023-12-27 21:38:03
 * @FilePath: \vue3-ts\src\views\bus\components\echarts\BarGraph.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div ref="barGraph" class="barGraph" :style="style"></div>
</template>

<script setup lang="ts">
import * as echarts from "echarts";
import { ref, reactive, watch, nextTick } from "vue";
// 接收值
let props = defineProps({
  dataSource: {
    type: Object,
    default: false,
  },
});

// 定义值
let barGraph = ref(); //ref的应用
let style = reactive({
  width: "100%",
  height: "100%",
});
let obj = JSON.parse(JSON.stringify(props.dataSource));
let myEcharts = echarts;

// 定义加载函数
let initCharts = () => {
  let chart = echarts.init(barGraph.value);
  var xData = (function () {
        var data = [];
        for (var i = 2018; i <=2023; i++) {
          data.push(i + "年");
        }
        return data;
      })();
      var color = obj.color || [];
      var name = obj.name || [];
      var data = obj.data || [];

      var series = [];
      for (var i = 0; i < color.length; i++) {
        series.push({
          name: name[i],
          type: "line",
          symbolSize: 3, //标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10[ default: 4 ]
          symbol: "circle", //标记的图形。ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
          smooth: true, //是否平滑曲线显示
          showSymbol: false, //是否显示 symbol, 如果 false 则只有在 tooltip hover 的时候显示
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: color[i],
                  },
                  {
                    offset: 0.8,
                    color: "rgba(255,255,255,0)",
                  },
                ],
                false
              ),
              shadowBlur: 10,
              opacity: 0.3,
            },
          },
          itemStyle: {
            normal: {
              color: color[i],
              lineStyle: {
                width: 1,
                type: "solid", //'dotted'虚线 'solid'实线
              },
              borderColor: color[i], //图形的描边颜色。支持的格式同 color
              borderWidth: 8, //描边线宽。为 0 时无描边。[ default: 0 ]
              barBorderRadius: 0,
              label: {
                show: false,
              },
              opacity: 0.5,
            },
          },
          data: data[i],
        });
      }
      let option = {
        grid: {
          left: "3%",
          top: "5%",
          right: "6%",
          bottom: "3%",
          containLabel: true,
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
          textStyle: {
            color: "#fff", //设置文字颜色
          },
          backgroundColor: "#061436", // 背景
          padding: [8, 10], //内边距
          extraCssText: "box-shadow: 0 0 3px rgba(255, 255, 255, 0.4);", //添加阴影
        },
        xAxis: [
          {
            type: "category",
            axisLine: {
              lineStyle: {
                color: "#32346c",
              },
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: "#32346c ",
              },
            },
            boundaryGap: false, //坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样
            axisTick: {
              show: false,
            },
            splitArea: {
              show: false,
            },
            axisLabel: {
              inside: false,
              textStyle: {
                color: "#bac0c0",
                fontWeight: "normal",
                fontSize: 12,
              },
            },
            data: xData,
          },
        ],
        yAxis: {
          type: "value",
          axisTick: {
            show: false,
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "#32346c",
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "#32346c ",
            },
          },
          axisLabel: {
            textStyle: {
              color: "#bac0c0",
              fontWeight: "normal",
              fontSize: 12,
            },
            formatter: "{value}",
          },
        },
        series: series,
      };
      chart.setOption(option, true);
  // 当窗口大小改变时候，echarts重置大小
  window.addEventListener("resize", () => {
    chart.resize();
  });
};

// 监听当配置项发生变化的时候，调用加载函数
watch(
  () => props.dataSource,
  (val) => {
    if (Object.keys(val)) {
      nextTick(() => {
        initCharts();
      });
    }
  },
  { immediate: true }
);
</script>

<style lang="less" scoped></style>
